<template>
  <div>
    <BasicModal
      @register="registerModal"
      v-bind="$attrs"
      title="添加包"
      :closeFunc="close"
      :destroy-on-close="true"
      @ok="handleSubmit"
    >
      <BasicForm @register="registerForm">
        <template #localPacket>
          <Upload :maxCount="1" :beforeUpload="handleBeforeUpload">
            <a-button> 选择文件 </a-button>
          </Upload>
        </template>
      </BasicForm>
    </BasicModal>
  </div>
</template>

<script setup lang="ts">
  import { BasicModal, useModalInner } from '/@/components/Modal';
  import { BasicForm, useForm } from '/@/components/Form';
  import { schemas } from './addPacketModal.data';
  import { Upload } from 'ant-design-vue';
  import { onMounted, ref } from 'vue';
  import { modalFormStyleSetting, modalStyleSetting } from '/@/settings/thingsBoardDesign';

  const emit = defineEmits(['success']);
  const fileData = ref<File>();
  const [registerForm, { validate, setFieldsValue, resetFields }] = useForm({
    layout: 'vertical',
    schemas,
    showActionButtonGroup: false,
    ...modalFormStyleSetting,
  });
  const [registerModal, { setModalProps, closeModal }] = useModalInner();
  // 选择文件
  const handleBeforeUpload = (file: File) => {
    fileData.value = file;
    setFieldsValue({ localPacket: file });
    return false;
  };

  const close = async () => {
    resetFields();
    return true;
  };
  const handleSubmit = async () => {
    try {
      const values = await validate();
      closeModal();
      emit('success', { values, key: 'add' });
    } catch (e) {
      
    }
  };
  onMounted(() => setModalProps({ ...modalStyleSetting }));
</script>
